<template>
    <!-- 这是自定义的搜索组件 -->
    <view class="my-search-container" :style="{'background-color':bgColor}" @click="searchBoxHandler">
      <view class="my-search-box" :style="{'border-radius':radius+'px'}">
       <!-- 使用uni-ui提供的组件 --> 
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
      </view>
    </view>
</template>

<script>
  export default {
    props:{
      //背景颜色
      bgColor:{
        type:String,
        default:"#C00000"
      },
      //圆角尺寸
      radius:{
        type:Number,
        default:18  //px
       }
    },
    name:"my-search",
    data() {
      return {
        
      };
    },
    methods:{
      searchBoxHandler(){
        // console.log('ok');
        // 外侧的事件当触发时，会进入内部的组件的事件处理函数中，这个时候，会先执行组件内部的事件，但是对于外部的事件执行需要通过this.$emit才能执行，这个方法所串的参数为为一个事件名字，比如你外面所起的点击事件click
        this.$emit('click');
      }
    }
  }
</script>

<style lang="scss">
.my-search-container{
   // background-color: #C00000;
  height: 50px;
  display: flex;
  align-items: center;
  // padding: 10px 0;
  padding: 0 10px;
  .my-search-box{
    height: 36px;
    background-color: white;
    // border-radius: 20px;
    text-align: center;
    line-height: 36px;
    flex-grow: 1;
  }
}
</style>